<template>
    <div class="app-container">
        <tree-table :data="datas" :columns="columns" border @selected="getData" >
            <el-table-column label="链接" width="200" align="left">
                <template slot-scope="scope">
                    <span style="color:sandybrown">{{scope.row.code}}</span>
                </template>
            </el-table-column>
            <el-table-column label="组件路径" width="300" align="left">
                <template slot-scope="scope">
                        <span style="color:sandybrown">{{scope.row.component}}</span>
                </template>
            </el-table-column>
            <el-table-column label="图标" align="center">
                <template slot-scope="scope">
                    <span style="color:sandybrown">{{scope.row.icon}}</span>
                </template>
            </el-table-column>
            <el-table-column label="显示顺序">
                <template slot-scope="scope">
                    <span style="color:sandybrown">{{scope.row.orders}}</span>
                </template>
            </el-table-column>
            <el-table-column label="是否显示" width="120" align="center">
                <template slot-scope="scope">
                    <span style="color:sandybrown">{{scope.row.isDisplay==true?"显示":"隐藏"}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" >
                    <template slot-scope="scope">
                        <div style="text-align:center" >
                            <i class="el-icon-circle-plus" @click="addData(scope.row)" style="margin-right:10px;color:black;cursor:pointer"></i>
                            <i class="el-icon-edit"  @click="editData(scope.row)" v-show="!scope.row.root" style="margin-left:10px;margin-right:10px;color:black;cursor:pointer"></i>
                            <i class="el-icon-delete" @click="deleteData(scope.row)" v-show="!scope.row.root"  style="margin-left:10px;color:black;cursor:pointer"></i>
                        </div>
                    </template>
            </el-table-column>
        </tree-table>
        <el-dialog :title="menuDataName"  :visible.sync="menuDataDialog" center :before-close="handleClose" width="35%">
            <hr style="height:0px;border:none;border-top:0px solid #CCC;margin:0px 0px 20px 0px">
            <el-form :model="form" :rules="ruleValidate" ref="form">
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="name" >
                    <el-input v-model="form.name" placeholder="请填写菜单显示名称"></el-input>
                </el-form-item>
                <el-form-item label="菜单链接" :label-width="formLabelWidth" prop="code">
                    <el-input v-model="form.code" placeholder="请填写菜单链接"></el-input>
                </el-form-item>
                <el-form-item label="组件路径" :label-width="formLabelWidth" prop="component">
                    <el-input v-model="form.component" placeholder="请填写vue组件路径(无需.vue)"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" :label-width="formLabelWidth">
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>
                <el-form-item label="菜单顺序" :label-width="formLabelWidth">
                    <el-input v-model="form.orders"></el-input>
                </el-form-item>
                <el-form-item label="是否显示" :label-width="formLabelWidth">
                    <el-select v-model="form.isDisplay" placeholder="请选择是否显示" size="100%">
                        <el-option label="显示" value="1"></el-option>
                        <el-option label="隐藏" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取  消</el-button>
                <el-button type="primary" @click="confirmDialog('form')">提  交</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import treeTable from '@/components/TreeTable'
import { getObj,addObj,delObj } from 'api/menu'
import { mapGetters } from 'vuex';
export default {
    name: 'menuTree',
    components: { treeTable },
    data() {
        var validateCode = (rule, value, callback) => {
            var reu =new RegExp("/s*");
            if (!value) {
                return callback(new Error('不能为空'));
            }else if(value.replace(/(^\s*)|(\s*$)/g, "").length==0){
                callback(new Error('请输入内容'));
            }else {
                callback();
            }
        };
        return {
            datas:[{'name': '根目录(或者系统名称)', 'code':'系统维护','component':'','icon':'','orders':'','isDisplay':true,'root':true, 'dbid':'0',children:'',type:'00'}],
            form: {
                parentId: '',
                name: undefined,
                code: undefined,
                component: undefined,
                url:'',
                icon: '',
                orders: '',
                isDisplay: '1',
                type:'00'
            },
            formLabelWidth:'80px',
            menuDataName:'',
            menuDataDialog:false,
            ruleValidate: {
                name:[{validator: validateCode}],
                code: [{validator: validateCode}],
                component: [{validator: validateCode}],
                content: [{message: '请输入内容'}]
            },
            node : {},
            //定义权限按钮开关
            menu_add: false,
            menu_edit: false,
            menu_delete: false,
        }
    },
    created(){
        this.menu_add = this.elements['menu_add'];
        this.menu_edit = this.elements['menu_edit'];
        this.menu_delete = this.elements['menu_delete'];
    },
    methods:{
        getData(node){
            console.log(node)
            var that_ = this;
            getObj(node.dbid, node.type).then( res => {
                if(res.data.length > 0){
                    that_.$set(node, 'children', res.data)
                }  
            })
        },
        addData(node){
            this.menuDataDialog = true;
            this.menuDataName = "新增菜单";
            this.form = {name:'',code: '',component: '',icon: '',orders: '',isDisplay: '1',parentId:node.dbid,type:'00'}
            this.node = node;
        },
        editData(node){
            console.log(node)
            this.menuDataDialog = true;
            this.menuDataName = "编辑菜单";
            this.form = {dbid:node.dbid,name:node.name, code: node.code,component: node.component,icon: node.icon,orders: node.orders,isdisplay: node.isDisplay==true?'1':'0',parentId: node.parentId,type:'00'}
            this.node = node.parent;
        },
        deleteData(node){
            let that_ = this;
            that_.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delObj(node.dbid).then(res => {
                    that_.reload(node.parent)
                    that_.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
                
            }).catch(() => {
                that_.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        confirmDialog(name){
            var node = this.node;
            var that_=this;
            that_.$refs[name].validate(function(valid){
                if (valid) {
                    that_.$confirm('确认提交？')
                    .then(_ => {
                        that_.form.url = that_.form.code
                        addObj(that_.form).then(res => {
                            that_.menuDataDialog = false;
                            that_.reload(node)
                        })
                    })
                }
            })
        },
        closeDialog(){
            this.$confirm('确认关闭此窗口(未保存数据将消失)？')
            .then(_ => {
               this.menuDataDialog = false;
            }).catch(_ => {});
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            }).catch(_ => {});
        },
        reload(node) {
            //刷新节点
            if (node.children) {
                node.children.splice(0, node.children)
            }
            this.getData(node);
        },
    },
    computed: {
        ...mapGetters(['elements']),
        columns(){
            let cols = [];
            cols.push({
                    text: '名称',
                    value: 'name',
                    width: '300'
                });
            return cols;
        }
    }
}
</script>
<style>
.el-table th>.cell {
    position: relative;
    word-wrap: normal;
    text-overflow: ellipsis;
    vertical-align: middle;
    width: 100%;
    box-sizing: border-box;
    text-align: center !important;
}
.el-select {
    display: flex!important;
    position: relative!important;
}
.el-dialog--center .el-dialog__header {
    padding-top: 15px!important;
    background: 	Lavender
}
.el-dialog--center .el-dialog__body {
    text-align: initial;
    padding: 0px 27px 0px!important;
}
.el-dialog--center .el-dialog__footer {
    text-align: inherit;
    padding-bottom: 15px!important;
}
.el-dialog__title {
    line-height: 24px;
    font-size: 22px;
    color: #2d2f33;
    border: 2px;
}
</style>
